<template>
	<div id="vip_detail" class="table" v-show="formVisible">
		<div class="container">
			<div style="text-align:center;">
				<div style="text-align:left; margin:0 auto;">
					<el-form :model="modelData" label-width="120px">
						<div style="text-align:left;width:100%; margin:0 auto;">
							<el-form-item label="头像：">
								<el-upload class="avatar-uploader" :show-file-list="false" width="100" :action="globaldata.uploadUrl" :on-success="handleAvatarSuccess">
									<img v-if="modelData.headImg" :src="globaldata.ftpUrl + modelData.headImg" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div class="headimg">温馨提示：建议尺寸80*80</div>
							</el-form-item>
							<div class="rows">
								<el-form-item label="投资人名称：">
									<el-input v-model="modelData.realName" :maxlength="50"></el-input>
								</el-form-item>
								<el-form-item label="融资机构：">
									<el-select v-model="modelData.companyId" filterable placeholder="请选择">
										<el-option v-for="item in companys" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
									</el-select>
								</el-form-item>
							</div>
							<div class="rows">
								<el-form-item label="手机号：">
									<el-input v-model="modelData.tel" :maxlength="50"></el-input>
								</el-form-item>
								<el-form-item label="邮箱：">
									<el-input v-model="modelData.email" :maxlength="50"></el-input>
								</el-form-item>
							</div>
							<div class="rows">
								<el-form-item label="客服代表：">
									<el-select v-model="modelData.userId" placeholder="请选择">
										<el-option v-for="item in userlist" :key="item.id" :label="item.userName+':'+(item.askTagCN==null?'':item.askTagCN)" :value="item.id"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="职务：">
									<el-select v-model="modelData.career" placeholder="请选择">
										<el-option v-for="(value,key) in careerjobs" :key="key" :label="value" :value="key"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="城市：">
									<el-select v-model="modelData.city" placeholder="请选择">
										<el-option v-for="(value,key) in citys" :key="key" :label="value" :value="key"></el-option>
									</el-select>
								</el-form-item>
							</div>
							<el-form-item label="轮次偏好：">
								<el-checkbox-group v-model="selectedtags" size="mini">
									<el-checkbox v-for="(value,key) in investTags" :key="key" :label="key">{{value}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
							<el-form-item label="个人简介:">
							<el-input type="textarea" v-model="modelData.personalInfo" :rows="4" :maxlength="200" placeholder="请输入个人简介">
							</el-input>
						</el-form-item>
						</div>
					</el-form>
				</div>
			</div>
			<div>
				<div slot="footer" class="dialog-footer my_flex_right">
					<el-button @click="close()">返回</el-button>
					<el-button type="primary" @click="save()">保存</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import service from '../../../../js/common/customerservice.js';
	import companyservice from '../../../../js/services/companyservice.js';
	import userservice from '../../../../js/common/userservice.js'
	export default {
		props: {
			id: 0,
			parentDetailData: {},
			userType: ''
		},
		data() {
			return {
				cardicon: require('../../../../assets/cardicon.png'), //默认图片
				companys: [],
				userlist:[],
				careerjobs: [],
				modelData: {},
				citys: [],
				investTags: [],
				selectedtags: [],
				formVisible: false,
				searchcondition: {
					pageNum: 1,
					pageSize: 100000
				},
			}
		},
		mounted() {
			let self = this;
			let param_arr = ['career_job'];
			this.tool.getDirByKey(this, param_arr).then(() => {
				self.careerjobs = self.$store.state.career_job;
			});
			param_arr = ['city']; //城市
			this.tool.getDirByKey(this, param_arr).then(() => {
				self.citys = self.$store.state.city;
			});
			param_arr = ['invest']; //融资轮次
			this.tool.getDirByKey(this, param_arr).then(() => {
				self.investTags = self.$store.state.invest;
			});
			companyservice.getAllCompanys(this, function(res) {
				self.companys = res.data;
			});
			userservice.GetUserServiceList(this, function(res) {
				self.userlist = res.data;
			});
		},
		methods: {
			show() {
				this.formVisible = true;
			},
			save() {
				service.handleSave(this);
			},
			close() {
				this.parentDetailData.isTabelShow = true;
				this.formVisible = false;
			},
			resetData() {
				this.modelData = {
					id: null,
					realName: '',
					companyId: null,
					tel: '',
					email: '',
					headImg: '',
					headImgUrl: '',
					personalInfo:''
				}
			},
			handleAvatarSuccess(res, file) {
				let data = res.data;
				if(res.code == 1) {
					this.modelData.headImg = data.fileRewriteFullyQualifiedPath.substr(1);
				} else {
					this.$message({
						message: res.msg,
						type: 'error'
					});
				}
			},
		},
		watch: {
			formVisible(newVal, oldVal) {
				if(newVal) { //详情页弹出
					this.resetData();
					service.getModelData(this, this.id);
				}
			},
		}
	}
</script>
<style lang="less">
	#vip_detail {
		.cardIcon {
			width: 100px;
			height: 100px;
		}
		.headimg{
			color: red;
		}
	}
</style>